<template>
  <el-dialog
    title="取消订单"
    :visible.sync="visible"
    width="50%"
    lockScroll
    :before-close="handleClose"
  >
    <el-form :model="refundForm" label-width="120px" label-position="left">
      <el-form-item label="订单编号">
        <el-input v-model="refundForm.orderId" disabled></el-input>
      </el-form-item>
      <el-form-item label="商品名称">
        <el-input v-model="refundForm.goods" disabled></el-input>
      </el-form-item>
      <el-form-item label="数量">
        <el-input v-model="refundForm.quantity" disabled></el-input>
      </el-form-item>
      <el-form-item label="单价">
        <el-input v-model="refundForm.price" disabled></el-input>
      </el-form-item>
      <el-form-item label="总金额">
        <el-input v-model="refundForm.total" disabled></el-input>
      </el-form-item>
      <el-form-item label="退款原因">
        <el-input
          type="textarea"
          v-model="refundForm.reason"
          :autosize="{ minRows: 4, maxRows: 6 }"
        ></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" :loading="loading" style="background-color: var(--color-base); border-color: var(--color-base)" @click="handleConfirm">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    order: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      loading: false,
      refundForm: {
        orderId: null,
        goods: null,
        quantity: null,
        price: null,
        total: null,
        reason: ''
      }
    };
  },
  watch: {
    visible(val) {
      if (!val) {
        this.loading = false;
      }
    },
    order(val) {
      this.refundForm = {
        orderId: val.id,
        goods: val.goods,
        quantity: val.quantity,
        price: val.price,
        total: val.total,
        reason: ''
      };
    }
  },
  methods: {
    handleClose() {
      this.$emit('update:visible', false);
    },
    handleConfirm() {
      this.loading = true;
      // 这里可以添加提交退款申请的逻辑
      setTimeout(() => {
        this.$message({
          message: '退款申请已提交',
          type: 'success'
        });
        this.loading = false;
        this.handleClose();
      }, 1000);
    }
  }
};
</script>

<style scoped>
/* 添加自定义样式 */
</style>